<template>
	<view class="register-container">
		<view class="register-header">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="app-name">用户注册</text>
		</view>

		<view class="register-form">
			<view class="form-item">
				<uni-easyinput
					v-model="registerForm.username"
					placeholder="请输入用户名（3-20位字符）"
					:styles="inputStyles"
					prefixIcon="person"
				></uni-easyinput>
			</view>

			<view class="form-item">
				<uni-easyinput
					v-model="registerForm.email"
					placeholder="请输入邮箱"
					:styles="inputStyles"
					prefixIcon="email"
				></uni-easyinput>
			</view>

			<view class="form-item">
				<uni-easyinput
					v-model="registerForm.phone"
					placeholder="请输入手机号（可选）"
					:styles="inputStyles"
					prefixIcon="phone"
				></uni-easyinput>
			</view>

			<view class="form-item">
				<uni-easyinput
					v-model="registerForm.password"
					type="password"
					placeholder="请输入密码（6-20位）"
					:styles="inputStyles"
					prefixIcon="locked"
				></uni-easyinput>
			</view>

			<view class="form-item">
				<uni-easyinput
					v-model="registerForm.confirmPassword"
					type="password"
					placeholder="请确认密码"
					:styles="inputStyles"
					prefixIcon="locked"
				></uni-easyinput>
			</view>

			<view class="agreement">
				<checkbox-group @change="onAgreementChange">
					<label class="agreement-item">
						<checkbox :checked="isAgreed" />
						<text class="agreement-text">我已阅读并同意</text>
						<text class="agreement-link" @click="showAgreement">《用户协议》</text>
					</label>
				</checkbox-group>
			</view>

			<button class="register-btn" @click="handleRegister" :disabled="!canRegister">
				{{ isLoading ? '注册中...' : '立即注册' }}
			</button>

			<view class="login-link">
				<text class="link-text" @click="goToLogin">已有账号？立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
import { useUserStore } from '@/stores/user.js'

export default {
	data() {
		return {
			registerForm: {
				username: '',
				email: '',
				phone: '',
				password: '',
				confirmPassword: ''
			},
			isLoading: false,
			isAgreed: false,
			inputStyles: {
				color: '#333333',
				backgroundColor: '#f8f8f8',
				borderColor: '#e0e0e0'
			}
		}
	},
	setup() {
		const userStore = useUserStore()
		return {
			userStore
		}
	},
	computed: {
		canRegister() {
			return this.registerForm.username.trim() && 
				   this.registerForm.email.trim() && 
				   this.registerForm.password.trim() && 
				   this.registerForm.confirmPassword.trim() && 
				   this.isAgreed && 
				   !this.isLoading
		}
	},
	methods: {
		validateForm() {
			const { username, email, password, confirmPassword } = this.registerForm
			
			// 用户名验证
			if (username.length < 3 || username.length > 20) {
				return { valid: false, message: '用户名长度应为3-20位字符' }
			}
			
			// 邮箱验证
			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
			if (!emailRegex.test(email)) {
				return { valid: false, message: '请输入有效的邮箱地址' }
			}
			
			// 密码验证
			if (password.length < 6 || password.length > 20) {
				return { valid: false, message: '密码长度应为6-20位' }
			}
			
			// 确认密码验证
			if (password !== confirmPassword) {
				return { valid: false, message: '两次输入的密码不一致' }
			}
			
			return { valid: true }
		},

		async handleRegister() {
			if (!this.canRegister) return

			// 表单验证
			const validation = this.validateForm()
			if (!validation.valid) {
				uni.showToast({
					title: validation.message,
					icon: 'none'
				})
				return
			}

			this.isLoading = true

			try {
				const result = this.userStore.register(this.registerForm)
				
				if (result.success) {
					uni.showModal({
						title: '注册成功',
						content: '恭喜您注册成功！请使用新账号登录。',
						showCancel: false,
						success: () => {
							this.goToLogin()
						}
					})
				} else {
					uni.showToast({
						title: result.message,
						icon: 'none'
					})
				}

			} catch (error) {
				uni.showToast({
					title: '注册失败，请重试',
					icon: 'none'
				})
			} finally {
				this.isLoading = false
			}
		},

		onAgreementChange(e) {
			this.isAgreed = e.detail.value.length > 0
		},

		showAgreement() {
			uni.showModal({
				title: '用户协议',
				content: '这里是用户协议的内容...',
				showCancel: false
			})
		},

		goToLogin() {
			uni.navigateBack()
		}
	}
}
</script>

<style scoped>
.register-container {
	min-height: 100vh;
	background: #ffffff;
	padding: 80rpx 40rpx 40rpx;
}

.register-header {
	text-align: center;
	margin-bottom: 80rpx;
}

.logo {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 30rpx;
}

.app-name {
	font-size: 48rpx;
	font-weight: bold;
	color: #ff6b35;
}

.register-form {
	margin-bottom: 60rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.agreement {
	margin: 40rpx 0;
}

.agreement-item {
	display: flex;
	align-items: center;
}

.agreement-text {
	color: #666666;
	font-size: 28rpx;
	margin-left: 20rpx;
}

.agreement-link {
	color: #ff6b35;
	font-size: 28rpx;
}

.register-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(45deg, #ff6b35, #ff8c42);
	color: white;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 20rpx;
}

.register-btn:disabled {
	background: #cccccc;
	color: #999999;
}

.login-link {
	text-align: center;
	margin-top: 40rpx;
}

.link-text {
	color: #ff6b35;
	font-size: 28rpx;
}
</style>
